<template>
  <div>
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
      </div>
      <!-- <el-scrollbar class="page-component__scroll" style="height:100%"> -->
      <div style="height:700px;">
        <el-table
          :header-cell-style="{ background: '#f5f5f5' }"
          class="perTabSty"
          :data="tableData"
          height="700"
          style="width: 100%;margin-bottom: 20px; "
          row-key="id"
          border
          size="small"
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column
            label="序号"
            width="80"
            prop="index"
            align="center"
          ></el-table-column>
          <el-table-column prop="title" label="重点工作名称"></el-table-column>
          <el-table-column align="center" label="第一季度目标完成率">
            <el-table-column width="70" align="center" prop="one" label="1月">
              <template slot-scope="scope">
                <span v-if="scope.row.degree.moth1"
                  >{{ scope.row.degree.moth1 }}%</span
                >
              </template>
            </el-table-column>
            <el-table-column width="70" align="center" prop="two" label="2月">
              <template slot-scope="scope">
                <span v-if="scope.row.degree.moth2"
                  >{{ scope.row.degree.moth2 }}%</span
                >
              </template>
            </el-table-column>
            <el-table-column width="70" align="center" prop="three" label="3月">
              <template slot-scope="scope">
                <span v-if="scope.row.degree.moth3"
                  >{{ scope.row.degree.moth3 }}%</span
                >
              </template>
            </el-table-column>
            <el-table-column
              width="70"
              align="center"
              prop="oneQuarter"
              label="季度完成率"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.degree.quarter1"
                  >{{ scope.row.degree.quarter1 }}%</span
                >
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="第二季度目标完成率">
            <el-table-column width="70" align="center" prop="four" label="4月">
              <template slot-scope="scope">
                <span v-if="scope.row.degree.moth4"
                  >{{ scope.row.degree.moth4 }}%</span
                >
              </template>
            </el-table-column>
            <el-table-column width="70" align="center" prop="five" label="5月">
              <template slot-scope="scope">
                <span v-if="scope.row.degree.moth5"
                  >{{ scope.row.degree.moth5 }}%</span
                >
              </template>
            </el-table-column>
            <el-table-column width="70" align="center" prop="six" label="6月">
              <template slot-scope="scope">
                <span v-if="scope.row.degree.moth6"
                  >{{ scope.row.degree.moth6 }}%</span
                >
              </template>
            </el-table-column>
            <el-table-column
              width="70"
              align="center"
              prop="twoQuarter"
              label="季度完成率"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.degree.quarter2"
                  >{{ scope.row.degree.quarter2 }}%</span
                >
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="第三季度目标完成率">
            <el-table-column width="70" align="center" prop="seven" label="7月">
              <template slot-scope="scope">
                <span v-if="scope.row.degree.moth7"
                  >{{ scope.row.degree.moth7 }}%</span
                >
              </template>
            </el-table-column>
            <el-table-column width="70" align="center" prop="eight" label="8月">
              <template slot-scope="scope">
                <span v-if="scope.row.degree.moth8"
                  >{{ scope.row.degree.moth8 }}%</span
                >
              </template>
            </el-table-column>
            <el-table-column width="70" align="center" prop="nine" label="9月">
              <template slot-scope="scope">
                <span v-if="scope.row.degree.moth9"
                  >{{ scope.row.degree.moth9 }}%</span
                >
              </template>
            </el-table-column>
            <el-table-column
              width="70"
              align="center"
              prop="threeQuarter"
              label="季度完成率"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.degree.quarter3"
                  >{{ scope.row.degree.quarter3 }}%</span
                >
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="全年目标完成率">
            <el-table-column width="70" align="center" prop="ten" label="10月">
              <template slot-scope="scope">
                <span v-if="scope.row.degree.moth10"
                  >{{ scope.row.degree.moth10 }}%</span
                >
              </template>
            </el-table-column>
            <el-table-column
              width="70"
              align="center"
              prop="eleven"
              label="11月"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.degree.moth11"
                  >{{ scope.row.degree.moth11 }}%</span
                >
              </template>
            </el-table-column>
            <el-table-column
              width="70"
              align="center"
              prop="twelve"
              label="12月"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.degree.moth12"
                  >{{ scope.row.degree.moth12 }}%</span
                >
              </template>
            </el-table-column>
            <el-table-column
              width="70"
              align="center"
              prop="fourQuarter"
              label="季度完成率"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.degree.quarter4"
                  >{{ scope.row.degree.quarter4 }}%</span
                >
              </template>
            </el-table-column>
          </el-table-column>
          <!-- <el-table-column align="center" prop="completeDegree" label="全年目标完成率"></el-table-column> -->
          <el-table-column
            align="center"
            prop="departmentName"
            label="领导小组"
          ></el-table-column>
          <el-table-column align="center" label="操作" width="120">
            <template
              slot-scope="scope"
              v-if="!scope.row.children || scope.row.children.length == 0"
            >
              <!-- <el-button type="primary" size="mini" @click="handleLook(scope.row)">查看</el-button> -->
              <el-button type="text" @click="handleRate(scope.row)"
                >完成率填报</el-button
              >
              <!-- <el-button type="success" size="mini" @click="handFileList(scope.row)">附件列表</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- </el-scrollbar> -->
      <!-- 完成率填报 -->
      <el-dialog
        class="rateDialog"
        width="25%"
        title="完成率填报"
        :visible.sync="dialogRate"
        :close-on-click-modal="false"
        @closed="closeDialogRate"
      >
        <el-form ref="rateRef" :model="rateForm" label-width="100px">
          <el-form-item label="填报类型:">
            <el-switch
              active-color="#13ce66"
              inactive-color="#ff4949"
              v-model="rateForm.type"
              active-text="季度填报"
              inactive-text="月度填报"
              @change="switchChange"
            ></el-switch>
          </el-form-item>
          <el-form-item label="年份：" prop="year">
            <el-date-picker
              v-model="rateForm.year"
              type="year"
              size="small"
              placeholder="选择年"
              style="width:134px"
              value-format="yyyy"
              disabled
            ></el-date-picker>
            <span style="width:120px;" class="striping">
              <i>-</i>
              <b
                style="color:#303133;font-weight: 500;fong-size:12px;"
                v-text="rateForm.type ? '季度' : '月份'"
              ></b>
              <el-select
                v-model="rateForm.time"
                size="small"
                placeholder="请选择"
                style="width:100px;"
                @change="typeTimeChange"
              >
                <el-option
                  v-for="(item, index) in typeTimeList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </span>
          </el-form-item>
          <el-form-item label="目标完成率:">
            <el-input
              class="rateSize"
              v-model="rateForm.completeDegree"
              style="width:40%"
              size="small"
            ></el-input>
            <i class="i_icon">%</i>
          </el-form-item>
          <el-form-item>
            <el-button class="saveRateSize" type="primary" @click="onSubmitRate"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 附件列表弹框 -->
      <el-dialog
        width="60%"
        title="附件列表配置"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        @closed="closeDialog"
      >
        <el-form
          :inline="true"
          label-width="95px"
          :model="dutyFrom"
          :hide-required-asterisk="false"
        >
          <el-form-item label="年份：" prop="year">
            <el-date-picker
              class="userIntSize"
              v-model="dutyFrom.year"
              type="year"
              placeholder="选择年"
              @change="changeYear"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="季度：" prop="quarter">
            <el-select class="userIntSize" v-model="dutyFrom.quarter" clearable>
              <el-option
                v-for="(item, index) in quarterList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="附件：" prop="file" class="boxCount">
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :on-success="successFile"
              :on-remove="handleDealFileRemove"
              :file-list="fileList"
              :limit="1"
            >
              <el-button size="small" type="success">上传附件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              class="saveBtn"
              type="primary"
              @click="submitForm"
              >添加</el-button
            >
          </el-form-item>
        </el-form>
        <el-table :data="fileTableData" border style="width: 100%">
          <el-table-column prop="address" label="附件"></el-table-column>
          <el-table-column prop="date" label="年份"></el-table-column>
          <el-table-column prop="name" label="季度"></el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import configJson from "../../api/config";
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      dutyFrom: {
        year: "",
        quarter: "",
        file: ""
      },
      quarterList: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "第四季度" }
      ],
      mounthList: [
        { id: 1, name: "1月" },
        { id: 2, name: "2月" },
        { id: 3, name: "3月" },
        { id: 4, name: "4月" },
        { id: 5, name: "5月" },
        { id: 6, name: "6月" },
        { id: 7, name: "7月" },
        { id: 8, name: "8月" },
        { id: 9, name: "9月" },
        { id: 10, name: "10月" },
        { id: 11, name: "11月" },
        { id: 12, name: "12月" }
      ],
      typeTimeList: [],
      // 选择附件
      uploadUrl: configJson.API_URL + "fileController/uploadFile",
      fileName: "",
      fileUrlEnd: "",
      fileList: [],
      fileTableData: [],
      dialogRate: false,
      rateForm: {
        type: true,
        year: new Date(),
        time: "",
        completeDegree: "",
        id: "",
        taskId: ""
      }
    };
  },
  mounted() {
    this.getTaskList();
  },
  methods: {
    decimal(val) {
      let _val = val * 100;
      _val = _val.toFixed(2);
      return _val + "%";
    },
    // 获取任务列表
    getTaskList() {
      this.$axios
        .post("task/getList")
        .then(res => {
          if (res.code == 200) {
            this.tableData = res.data;
            let _taskId = localStorage.getItem("taskId");
            this.tableData.forEach((item, index) => {
              if (_taskId == "null") {
                item.isDisplay = true;
                if (item.children || scope.row.children.length != 0) {
                  item.children.forEach((i, index2) => {
                    i.isDisplay = true;
                    i.index = `${index + 1}.${index2 + 1}`;
                  });
                }
                item.index = index + 1;
              } else {
                item.index = index + 1;
                if (item.id == _taskId) {
                  item.isDisplay = true;
                } else {
                  item.isDisplay = false;
                }
              }
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 查看
    // handleLook(row) {
    //   this.$router.push("/indicatorTaskPlan");
    // },
    switchChange(val) {
      this.rateForm.completeDegree = "";
      this.rateForm.time = "";
      if (val) {
        this.typeTimeList = this.quarterList;
      } else {
        this.typeTimeList = this.mounthList;
      }
    },
    // 完成率填报
    handleRate(row) {
      this.dialogRate = true;
      this.switchChange(this.rateForm.type);
      this.rateForm.taskId = row.id;
    },
    typeTimeChange(val) {
      console.log(val, "val");
      let obj = {
        taskId: this.rateForm.taskId,
        time: this.rateForm.time
      };
      if (this.rateForm.type) {
        obj.type = 1;
      } else {
        obj.type = 2;
      }
      this.$axios
        .post("taskDegree/load", obj, 2)
        .then(res => {
          if (res.code == 200) {
            if (res.data) {
              this.rateForm.id = res.data.id;
              this.rateForm.completeDegree = res.data.degree;
            } else {
              this.rateForm.id = "";
              this.rateForm.completeDegree = "";
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 打开附件列表弹框
    handFileList(row) {
      this.dialogFormVisible = true;
    },
    // 选择年
    changeYear(val) {
      this.dutyFrom.year = val.toLocaleDateString();
    },
    // 附件上传成功
    successFile(response, file, fileList) {
      if (response.code == 200) {
        this.fileList = fileList;
        let fileUrlStr = this.uploadUrl.split("/");
        let fileRemoveChl = fileUrlStr.slice(0, fileUrlStr.length - 1);
        this.fileUrlEnd = fileRemoveChl.join("/");
        this.fileName = this.fileUrlEnd + "/" + response.data;
      }
    },
    // 删除附件
    handleDealFileRemove(file, fileList) {
      this.fileList = fileList;
      this.fileName = "";
    },
    submitForm() {
      if (this.dutyFrom.year == "") {
        this.$message.error("请选择年份");
      } else if (this.dutyFrom.quarter == "") {
        this.$message.error("请选择季度");
      } else if (this.fileList.length == 0) {
        this.$message.error("请选择附件");
      }
    },
    closeDialog() {
      this.dutyFrom = {
        year: "",
        quarter: "",
        file: ""
      };
    },
    // 新增权限
    addPerFun(data) {
      this.$axios
        .post("taskDegree/add", data)
        .then(res => {
          if (res.code == 200) {
            this.$message({
              message: "填报成功",
              type: "success"
            });
            this.getTaskList();
            this.dialogRate = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 修改权限
    updataPer(data) {
      this.$axios
        .post("taskDegree/update", data)
        .then(res => {
          if (res.code == 200) {
            this.$message({
              message: "修改成功",
              type: "success"
            });
            this.getTaskList();
            this.dialogRate = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    onSubmitRate() {
      if (!this.rateForm.completeDegree) {
        this.$message.error("输入框不能为空");
        return;
      }
       if (!this.rateForm.time) {
        this.$message.error("输入框不能为空");
        return;
      }
      let obj = {
        degree: Number(this.rateForm.completeDegree),
        taskId: this.rateForm.taskId,
        time: this.rateForm.time
      };
      if (this.rateForm.type) {
        obj.type = 1;
      } else {
        obj.type = 2;
      }
      if (this.rateForm.id) {
        obj.id = this.rateForm.id;
        this.updataPer(obj);
      } else {
        this.addPerFun(obj);
      }
    },
    closeDialogRate() {
      this.rateForm = {
        type: true,
        year: new Date(),
        time: "",
        completeDegree: "",
        id: "",
        taskId: ""
      };
    }
  }
};
</script>
<style scoped>
.rateSize {
  width: 70%;
}
.saveRateSize {
  width: 60%;
  margin-left: 5%;
}
.saveBtn {
  margin-left: 50px;
}
.i_icon {
  display: inline-block;
  font-style: normal;
  position: relative;
  left: -24px;
  top: 2px;
}
</style>
<style>
.rateDialog .el-dialog__body {
  padding: 30px 0;
}
</style>
